<template>
  <div class="acticle-list">
    <b-card no-body>
      <nuxt-link to="#">
        <b-row no-gutters>
          <b-col md="4" class="overflow-hidden img-wrapper">
          <b-card-img src="https://picsum.photos/400/400/?image=20" class="rounded-0"></b-card-img>
          </b-col>
          <b-col md="8">
            <b-card-body title="javascript基础">
              <p class="acticle-meta">
                <span><b-icon icon="clock"></b-icon>发布于2021-10-18</span>
                <span><b-icon icon="folder"></b-icon>javascript</span>
                <span><b-icon icon="eye"></b-icon>152</span>
              </p>
              <b-card-text>
                This is a wider card with supporting text as a natural lead-in to additional content.
                This content is a little bit longer.
              </b-card-text>
            </b-card-body>
          </b-col>
        </b-row>
      </nuxt-link>
    </b-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      acticleList:[{
        id:0,
        title:'gjioergiore',
        desc:'gedgrger',
        tag:'js',
        time:'2021-09-16',
        view:151,
        comment:21
      }]
    }
  }
}
</script>

<style>
  .acticle-list {
    width: 72%;
  }
  .acticle-meta>span{
    font-size: 13px;
    margin-right: 14px;
    color: var(--minor-text-color);
  }
  .acticle-meta>span .b-icon {
    margin-right: 3px;
  }
  .acticle-meta>span:nth-child(2):hover {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
  }
  .card {
    border: none;
    border-radius: 0.8rem;
    margin-bottom: 20px;
    box-shadow: var(--card-box-shadow);
    transition: all .3s ease;
    background-color: var(--block-color);
  }
  .card:hover {
    box-shadow: var(--card-hover-box-shadow);
  }
  .card:hover img {
    transform: scale(1.1);
  }
  .card-body {
    height: 14.375rem;
    overflow: hidden;
  }
  .card-title {
    transition: all .2s ease;
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--base-text-color);
  }
  .card-title:hover {
    color: var(--primary);
  }
  .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--other-text-color);
  }
  .img-wrapper {
    height: 14.375rem;
    border-radius: 0.8rem 0 0 0.8rem;
  }
  .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
  }
</style>